<template>
  <div class="tree-wrapper">
    <el-tree-v2
      ref="treeRef"
      v-bind="attrs"
      :data="treeData"
      @nodeExpand="nodeExpandHandle"
      :style="{
        'height': '60vh',
      }"
    >
      <template #default="{ node }">
        <div class="tree-node">
          <div class="tree-node-title">{{ node.label }}</div>
        </div>
      </template>
    </el-tree-v2>
  </div>
</template>
<script setup>

defineOptions({
  name: 'custom-tree-v2',
})

// const treeKey = ref(0)
const attrs = computed(() => {
  return {
    'item-size': 34,
    ...useAttrs(),
  }
})
const treeRef = ref(null)
const treeData = ref([])
const props = defineProps({
  initTreeData: Function,
})
const emits = defineEmits(['onNodeExpand'])

const initTreeData = async () => {
  treeData.value = await props.initTreeData()
  // console.log(222, treeData.value);
}
const nodeExpandHandle = async (data, node) => {
  console.log(data, node)
  emits('onNodeExpand', data, node)
}
initTreeData()
defineExpose({
  treeRef,
})
onBeforeUnmount(() => {
  console.log('unmount custom-tree')
})
</script>

<style scoped>
.tree-wrapper {
  margin: 10px 0;
}

.tree-node {
  display: flex;
}
</style>
